<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>坐标轴</title>
  <script type="text/javascript" src="http://d3js.org/d3.v5.min.js"></script>
</head>
<body>
  <svg width="960" height="600"></svg>
  <script>
    var marge = {top:60,bottom:60,left:60,right:60}
    var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];  
    
    var scaleLinear = d3.scaleLinear()
      .domain([0,d3.max(dataset)])
      .range([0,250]);
      
    var svg = d3.select("svg");
    var g = svg.append("g")
      .attr("transform","translate("+marge.top+","+marge.left+")");
    
    var rectHeight = 30;
    
    g.selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("x",20)
      .attr("y",function(d,i){
        return i*rectHeight;
      })
      .attr("width",function(d){
        return scaleLinear(d);
      })
      .attr("height",rectHeight-5)
      .attr("fill","blue");
      
    //为坐标轴定义一个线性比例尺
    var xScale = d3.scaleLinear()
      .domain([0,d3.max(dataset)])
      .range([0,250]);
    //定义一个坐标轴
    var xAxis = d3.axisBottom(xScale)//定义一个axis，由bottom可知，是朝下的
      .ticks(7);//设置刻度数目
    g.append("g")
      .attr("transform","translate("+20+","+(dataset.length*rectHeight)+")")
      .call(xAxis);
  </script>
</body>
</html>
